<template>
  <div class="DeliverGoods">
    <div class="header">
      <p>
        <span class="text1">订单ID:</span
        ><el-input
          v-model="searchValue.orderId"
          style="width: 200px"
          placeholder="请输入订单号"
        />
      </p>
      <p>
        <span class="text1">司机:</span
        ><el-input
          v-model="searchValue.driver"
          style="width: 200px"
          placeholder="请输入司机姓名"
        />
      </p>
      <p style="width: 26%;">
        <span class="text1">姓名:</span
        ><el-input
          v-model="searchValue.name"
          style="width: 200px"
          placeholder="请输入下单人姓名"
        />
      </p>
      <p>
        <span class="text1">收件人:</span
        ><el-input
          v-model="searchValue.consignee"
          style="width: 200px"
          placeholder="请输入收件人姓名"
        />
      </p>
      <p style="width: 100%;">
        <span class="text1"></span>
        <el-button @click="getlist">查询</el-button>
        <el-button>重置</el-button>
      </p>
    </div>
    <div class="table">
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="orderId._id" label="订单ID" width="240"/>
        <el-table-column prop="orderId.name" label="姓名"/>
        <el-table-column prop="driver" label="司机"/>
        <el-table-column prop="orderId.consignee" label="收件人"/>
        <el-table-column prop="orderId.num" label="商品数量"/>
        <el-table-column label="商品金额">
          <template #default="scope">
            {{ scope.row.orderId.num * scope.row.orderId.price }}
          </template>
        </el-table-column>
        <el-table-column prop="orderId.phone" label="联系方式"/>
      </el-table>
    </div>
  </div>
</template>
  
<script setup>
import { getData } from "@/utils/way";
import { ref } from "vue";

let list = ref([]);
let page = ref(1);
let total = ref(-1);
let searchValue = ref({
  driver: "",
  orderId: "",
  name: "",
  consignee: ""
});

let getlist = async () => {
  let { data } = await getData(
    `/szh/delivergoods`
  );
  if (data.code == 200) {
    list.value = data.list;
    console.log(data.list);
    
  }
};
let currentPage = (val) => {
  page.value = val;
  getlist();
};
onMounted(() => {
  getlist();
});
</script>
  <style>
.DeliverGoods {
  width: 100%;
  background-color: #fff;
  padding: 20px;
}
.DeliverGoods .header {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.header p {
  width: 25%;
  height: 50px;
  line-height: 50px;
}
.text1 {
  width: 100px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
}
</style>
  